<template>
    <div>
        <searchBox @searchChange = "searchChange" />
    <div class="gva-table-box">
        
        <!-- <div class="gva-btn-list"><el-text class="mx-1" size="large">指标趋势</el-text></div> -->
       
        <el-tabs
    v-model="activeName"
    type="border-card"
    @tab-click="handleClick"
  >
    <el-tab-pane  label="平均时长" name="first"> <lineChart ref="average" title=" " :tableData="lineData" xAxis="date" series="average" seriesName="平均时长(分钟)"></lineChart></el-tab-pane>
    <el-tab-pane label="新用户平均时长" name="second"><lineChart  ref="newAverage" title=" " :tableData="lineData" xAxis="date" series="newAverage" seriesName="新用户平均时长(分钟)"></lineChart></el-tab-pane>
    <el-tab-pane label="老用户平均时长" name="third"><lineChart  ref="oldAverage" title=" " :tableData="lineData" xAxis="date" series="oldAverage" seriesName="老用户平均时长(分钟)"></lineChart></el-tab-pane>
  </el-tabs>
    </div>
    <div class="gva-table-box">
      <div style="padding-bottom: 10px;">
        <el-text class="mx-1" size="large" >详细数据</el-text>
      </div>
    
        <el-table
        ref="multipleTable"
        style="width: 100%"
        tooltip-effect="dark"
        row-key="ID"
        :data="tableData"
        border
      >

        <el-table-column
          align="left"
          label="日期"
          prop="date"
        />
        <el-table-column
          align="left"
          label="平均时长(分钟)"
          prop="average"
        >
        </el-table-column>
        <el-table-column
          align="left"
          label="新用户平均时长(分钟)"
          prop="newAverage"
        />
        <el-table-column
          align="left"
          label="老用户平均时长(分钟)"
          prop="oldAverage"
        >
        </el-table-column>
      </el-table>
    </div>
        </div>
    </template>  
    <script lang="ts" setup>
    import { ref,watch } from 'vue'
    import lineChart from '../../components/echarts/lineChart.vue';
    import searchBox from '../../components/search/searchBox.vue';
    import { useTransition } from '@vueuse/core'
    import type { TabsPaneContext } from 'element-plus';
    import {
        getHugeList
} from '@/api/openApi'
import { sumByKey } from '../../utils/fmtData'
// =========== 表格控制部分 ===========
const page = ref(1)
const tableData = ref([])
const yesterdayData = ref([])
const lineData = ref([])
const searchInfo = ref({})
const activeName = ref<string|number>('first')
const handleClick = (tab: TabsPaneContext, event: Event) => {
  lineData.value = []
  setTimeout(() => {
    lineData.value = JSON.parse(JSON.stringify(tableData.value))
  }, 200);
}


var searchChange = function(date){
  searchInfo.value = date
  getTableData()
}

const date = new Date()
date.setDate(date.getDate() - 1)
const date1 = date.toISOString().split('T')[0]; 
const yesterDaySearchDate = {start_date:date1,end_date:date1}

// 查询
const getTableData = function() {
  getHugeList({  type: 'duration', ...searchInfo.value }).then(res=>{
    if (res.code === 0) {
      let arr = []
      
      res.data.list.forEach(element => {
        let data = JSON.parse(element.response)
        //把秒转成分钟
        if (searchInfo.value.start_date == searchInfo.value.end_date){
          data.average = (data.average/60).toFixed(2)
          data.newAverage = (data.newAverage/60).toFixed(2) 
          data.oldAverage = (data.oldAverage/60).toFixed(2) 
        }else{
          data.average = (data.average/60/24).toFixed(2)
          data.newAverage = (data.newAverage/60/24).toFixed(2) 
          data.oldAverage = (data.oldAverage/60/24).toFixed(2) 
        }
        arr.push({
          date: element.date,
          average: data.average,
          newAverage: data.newAverage,
          oldAverage: data.oldAverage
        })
      });
      lineData.value = tableData.value = sumByKey(arr,'date')
    }
  })
}
const yesterdayData_yesterdayAmount = ref(0)
const yesterdayData_yesterdayAmount_tran = useTransition(yesterdayData_yesterdayAmount, {
  duration: 500,
})
const yesterdayData_curMonthAmount = ref(0)
const yesterdayData_curMonthAmount_tran = useTransition(yesterdayData_curMonthAmount, {
  duration: 500,
})
    
</script>      
<style>
.el-col {
    text-align: center;
}
</style>